// 在这里写redux.是因为可以直接使用es6模块化语法

// 创建store对象
// 引入创建store对象的方法
import { createStore } from 'redux'

// 定义reducer函数
// reducer函数用于修改redux中的数据.reducer的返回值是什么,则redux中数据就被改成了什么

// reducer函数执行的时机:
// 1. 创建store时,reducer会触发,这一次是为了初始化数据
// 2. 执行dispatch时,reducer会触发,这一次是为了修改数据
function reducer(state = { count: 1, msg: 'hello' }, action) {
  console.log('reducer函数执行了', state, action)
  switch (action.type) {
    case 'add':
      const newCount = state.count + 1
      return {
        ...state,
        count: newCount,
      }

    case 'sub':
      return {
        ...state,
        count: state.count - 1,
      }
    // 注意: redux中reducer函数必须写default.default的代码是固定的.必须是return state. 因为有了这段代码才能初始化数据
    default:
      return state
  }
}

// 创建store
// const store = createStore(reducer函数, 初始值)
const store = createStore(reducer)

// store.getState() 返回值就是redux中管理的数据
// store.dispatch({type: 'add'})  触发reducer函数,对数据进行修改
// store.subscribe(回调) 当redux数据发生变化的时候,回调会执行
console.log(store.getState())
// 注意: 一定要在调用dispatch之前监听redux数据
store.subscribe(() => {
  console.log(store.getState())
})
// store.dispatch({ type: 'add' })

// store.dispatch({ type: 'sub' })
